<template>
  <Card>
    <span slot="title">
      <div class="header">
        <div class="header_left">新增公告</div>
        <!-- <we-button size="mini" @click="$router.go(-1)">返回</we-button> -->
      </div>
    </span>
    <div slot="content">
      <we-button size="mini" @click="$router.go(-1)">返回</we-button>
      <div class="text item" style="display: flex; justify-content: center">
        <el-form
          :model="addAnnouncementForm"
          :rules="addRules"
          ref="addAnnouncementForm"
          label-width="120px"
          style="width: 500px"
        >
          <el-form-item label="公告标题" prop="title">
            <el-input v-model="addAnnouncementForm.title"></el-input>
          </el-form-item>
          <el-form-item label="来源" prop="summary">
            <el-input v-model="addAnnouncementForm.summary"></el-input>
          </el-form-item>
          <el-form-item label="有效时间范围" prop="effectiveTime">
            <el-date-picker
              v-model="addAnnouncementForm.effectiveTime"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="公告内容" prop="content">
            <!-- 富文本编辑器 -->
            <quill-editor
              ref="content"
              v-model="addAnnouncementForm.content"
              :options="editorOption"
            />
          </el-form-item>
          <el-form-item label="发布人" prop="creator">
            <el-select
              v-model="addAnnouncementForm.creator"
              placeholder="请选择发布人"
            >
              <el-option value="发布人1"></el-option>
              <el-option value="发布人2"></el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item>
            <el-upload
              :action="f"
              class="upload-demo"
              :on-change="handleChange"
              :file-list="addAnnouncementForm.myfiles"
            >
              <we-button size="small" type="primary">点击上传</we-button>
              <div slot="tip" class="el-upload__tip">
                只能上传jpg/png文件，且不超过500kb
              </div>
            </el-upload>
          </el-form-item> -->
          <el-form-item>
            <we-button size="small" @click="handleCreate" type="primary"
              >提交</we-button
            >
            <we-button size="small" @click="resetForm">重置</we-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </Card>
</template>

<script>
import Card from "@/components/Card";
import WeButton from "@/components/WeButton";
import moment from "moment";
// 富文本编辑器组件
import { quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import { addAnnouncement } from "@/api/titleDeclaration";
export default {
  components: {
    Card,
    WeButton,
    quillEditor,
  },
  data() {
    return {
      // 添加表单
      addAnnouncementForm: {
        title: "", //公告标题
        summary: "", //来源
        effectiveTime: "", //有效时间
        content: "", //公告内容
        creator: "", //发布人
        // myfiles: [], // 文件列表
      },
      // 日期数组
      dateArr: [],
      // 编辑选项
      editorOption: {},
      // 验证规则
      addRules: {
        title: [
          {
            required: true,
            message: "请输入公告标题",
            trigger: "blur",
          },
        ],
        summary: [
          {
            required: true,
            message: "请输入来源",
            trigger: "blur",
          },
        ],
        effectiveTime: [
          {
            required: true,
            message: "请选择有效时间",
            trigger: "change",
          },
        ],
        creator: [
          {
            required: true,
            message: "请选择活发布人",
            trigger: "change",
          },
        ],
        content: [
          {
            required: true,
            message: "请填写公告内容",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    handleChange(file, myfiles) {
      console.log(file, myfiles);
      this.myfiles = myfiles.slice(-3);
    },
    handleCreate() {
      this.$refs.addAnnouncementForm.validate(async (valid) => {
        if (valid) {
          this.addAnnouncementForm.effectiveTime.forEach((item) => {
            item = moment(item).format("YYYY-MM-DD");
            this.dateArr.push(item);
          });
          let { code, msg } = await addAnnouncement({
            title: this.addAnnouncementForm.title, //公告标题
            summary: this.addAnnouncementForm.summary, //来源
            startTime: this.dateArr[0],
            endTime: this.dateArr[1] + " " + "23:59:59",
            content: this.addAnnouncementForm.content, //公告内容
            creator: this.addAnnouncementForm.creator, //发布人
            // myfiles: [], // 文件列表
          });
          if (code === 200) {
            this.$message({
              type: "success",
              message: msg,
            });
            this.$router.push("/title_declaration/announcement_management");
          }
        } else {
          this.$message({
            type: "danger",
            message: "添加失败",
          });
          return false;
        }
      });
    },
    resetForm() {
      this.$refs.addAnnouncementForm.resetFields();
    },
  },
  created() {},
};
</script>

<style lang="less" scoped>
.header {
  display: flex;
  justify-content: space-between;
}
</style>